<template>
  <div id="home">
    <!-- <span v-for="item,index in this.newarr" :key="index">
        {{ item }}
    </span> -->
     <!-- <span v-for="item,index in str.split(',')" :key="index">
        {{ item }}
    </span> -->
    <!-- <div>
        {{str.split(',').map(v=>`asdads${v}`)}}
    </div> -->
    <!-- <span @click="addobj">
        删除
    </span> -->
    <!-- <button @click.stop="delobj"> 删除</button> -->

    <nav-bar class="nav-bar">
      <div slot="item-center">测试商城</div>
    </nav-bar>
    <tab-control class="tab-control2"  ref="tabControl2" :tabs="['流行','新款','精选']"  @changeGoods="changeGoods"  v-show="flag"/>

    <Scroll class="S-content" ref="Scroll"
            @scrollPosition="scrollPosition"
            :probe-type="3"
      :pull-up-load="true"
      @getMore="getMore"
    >
        <!-- <Input type="text" style="" > </Input> -->

        <HomeSwiper  :banners="HomeData.banners"  @swiperImgLoad="swiperImgLoad"/>
        <recommend-view :reView="HomeData.reView" />
        <feature-view @load="featureViewLoad"/>
        <tab-control class="tab-control"  :tabs="['流行','新款','精选']"  @changeGoods="changeGoods"  ref="tabControl"/>
        <goods :goods="goods[goodType].list"    />
    </Scroll>

    <BackTop @click.native="backTop()" v-show="IsShow"    />


  </div>
</template>

<script>
    import NavBar from "../../components/common/navbar/NavBar";
    import HomeSwiper from "./childComp/HomeSwiper";
    import RecommendView from "./childComp/RecommendView";
    import FeatureView from "./childComp/FeatureView";
    import TabControl from "../../components/content/tabControl/TabControl";
    import Goods from "../../components/content/goods/Goods";
    import Scroll from "../../components/common/scroll/Scroll";
    import http from "../../network/http";

    import {HomeData,getGoods} from "../../network/home";
    import {debounce} from "../../common/utils";
    import {BackTopMixIn} from "../../common/mixin";
import axios from 'axios';



    export default {
        name: "Home",
        components: {
            NavBar,
            HomeSwiper,
            RecommendView,
            FeatureView,
            TabControl,
            Goods,
            Scroll,
        },
        mixins:[BackTopMixIn],
        data() {
            return {
                str: '阿萨德,热污染,地方, 发,',
                HomeData: {},
                goods:{
                  'pop':{page:0,list:[]},
                  'new':{page:0,list:[]},
                  'sell':{page:0,list:[]},
                },
                goodType:'pop',
                TabControlOffsetTop:0,
                flag:false,
                saveY:0,
                itemImgListener:null,
                newobj : {
                    name :'小白'
                },
                newarr : [
                    1,2,3,4
                ]
            }
        },
        created() {
            /**
             * 获取数据
             * */
            this.HomeData = HomeData();
            this.getHomeGoods('pop')
            this.getHomeGoods('new')
            this.getHomeGoods('sell')
            console.log(process.env.NODE_ENV);
            this.$nextTick(()=>{
                // console.log(this.$refs.content.$el.offsetHeight)
                // console.log(this.$refs.content)
            })
            //模拟请求数据
            this.testHttp()
        },
        mounted(){
            //图片加载完重载scroll
            // console.log(this.$refs.Scroll.refresh);
            const reload = debounce(this.$refs.Scroll.refresh)
            // this.$nextTick(()=>{

            // })
            this.itemImgListener = ()=>{
                reload()
            }

            this.$bus.$on('GoodsImgLoad',this.itemImgListener)

        },
        destroyed(){
            console.log('home destoryed');
        },
        activated(){
            // console.log('home activated');
            this.$refs.Scroll.scrollTo(0,this.saveY,0)
            // 最好做一次刷新
            this.$refs.Scroll.refresh()
        },
        deactivated(){
            // console.log('home deactivated' + this.$refs.Scroll.scroll.y);
            //保存Y值
            this.saveY = this.$refs.Scroll.scroll.y
        //    取消全局事件监听
            this.$bus.$off('GoodsImgLoad',this.itemImgListener)
        },
        methods:{
            addobj(){
                // this.newobj.age  = 18
                // this.$set(this.newobj, 'age', 18)
                // this.newarr[0] = 2
                // console.log(this.newarr);
                console.log(this.$refs.Scroll.$el.offsetHeight)
                
                // ssadad
            },
            delobj(){
                console.log('del');
                
            },
        
            getHomeGoods(type){
                this.goods[type].list.push(...getGoods(type,this.goods[type].page += 1))
            },

            async testHttp(){
                //  api.naturePlanData({name:'sss'}).then(res=>{
                // axios.get('api/index/ding.json').then(res=>{
                //     console.log(res);
                    
                // })
                //  console.log(res);
                // const res = http.get('api/index/ding.json') 
                // res.then(()=>{
                //     console.log('发送请求');
                    
                // })
                //  http.get('getlist').then(res=>{
                //     console.log('this',this);
                //     setTimeout(function() {
                //         console.log(this)
                //     }, 1000);
                //     // console.log(111);
                // })
                // this.$api.testApi({name:'xx'}).then(res=>{
                //     // console.log(111);
                // })
               
        
            },
            /**
             * 子传父事件 监听事件
             */
            changeGoods(index){
                switch (index) {
                    case 0:
                        this.goodType='pop'
                        break
                    case 1:
                        this.goodType='new'
                        break
                    case 2:
                        this.goodType='sell'
                        break
                }
                // 因为点击的组件不一样 不能保证index一样 所以每次都修改一下
                this.$refs.tabControl2.currentIndex = index
                this.$refs.tabControl.currentIndex = index
                // this.debounce(this.$refs.Scroll.refresh,20)
            },
            scrollPosition(position){
                this.IsShow = -(position.y)>500 ? true : false
                this.flag = -(position.y)>this.TabControlOffsetTop ? true : false
            },
            getMore(){
                this.getHomeGoods(this.goodType)
                // console.log("加载更多");
                this.$refs.Scroll.finishPullUp()
                this.$refs.Scroll.refresh
            },
            TabControlSetTop(){
                // console.log(this.$refs.tabControl.$el.offsetTop);
                //获取TabControl 的 OffsetTop
                //所有的组件都有一个属性 $el
                this.TabControlOffsetTop = this.$refs.tabControl.$el.offsetTop
            },
            swiperImgLoad(){
                debounce(this.$refs.Scroll.refresh,100)
                this.TabControlSetTop()
            },
            featureViewLoad(){
                this.$refs.Scroll.refresh
            }
        }
    }
</script>

<style scoped>
  #home{
    /*padding-top: 44px;*/
    /*position: relative;*/
    height: 100vh;
  }

  .nav-bar {
    background-color: var(--color-tint);
    color: white;
    position: relative;
    top:0;
    left: 0;
    right: 0;
    z-index: 9;
  }
  .tab-control{
    /*position: sticky;*/
    top: 44px;
    background-color: white;
    margin-bottom: 2px;
    z-index: 9;
  }

  .tab-control2{
    /*position: sticky;*/
    position: relative;
    background-color: white;
    margin-bottom: 2px;
    z-index: 10;
  }

  .S-content{
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 49px;
    /*background: white;*/
  }

  
</style>
